﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.SystemManage
@model SystemDataDicTreeItemModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    var AvailableDataTypes = ViewBag.AvailableDataTypes as IList<SelectListItem> ?? null;
}
@section cssstyles{
    <style type="text/css">
        .layui-form-switch {
            margin-top: 6px;
            height: 25px;
        }

        .layui-form-label {
            width: 130px !important;
        }

        .layui-input-block {
            margin-left: 130px !important;
        }

        .layui-slider-input {
            top: 0 !important;
        }

        .orderSlider {
            padding-top: 15px;
        }

        .organizetree {
            position: absolute;
            background-color: #fff;
            padding: 5px;
            z-index: 1000;
            box-shadow: 0 0 24px rgba(0,0,0,.18);
            opacity: 0;
            width: 220px;
            height: 0;
            display: none;
        }

        .organizetree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 330px;
            overflow: auto;
            transition: all .5s;
        }
    </style>
}
<div class="layui-fluid">
    <div class="layui-form layui-card">
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<SystemDataDicTreeItemModel>(m => m.ParentId))</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="OrganizeName" value="" />
                    <input type="text" class="layui-hide" name="@Model.nameof(m => m.ParentId)" value="@Model.ParentId" />
                    <div id="organizetree" class="layui-row organizetree"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<SystemDataDicTreeItemModel>(m => m.DataDicTreeName))</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.nameof(m => m.DataDicTreeName)" value="@Model.DataDicTreeName" lay-verify="required|maxlen40" placeholder="请输入机构名称" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">20字以内</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<SystemDataDicTreeItemModel>(m => m.DisplayName))</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.nameof(m => m.DisplayName)" value="@Model.DisplayName" lay-verify="required|maxlen40" placeholder="请输入机构显示名称" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">20字以内，不填则以机构名称为参考</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<SystemDataDicTreeItemModel>(m => m.DataType))</label>
                <div class="layui-input-inline">
                    <select asp-for="DataType" asp-items="@AvailableDataTypes" lay-filter="DataTypesSelect">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">只在机构参与失物招领审核时使用</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<SystemDataDicTreeItemModel>(m => m.DisplayOrder))</label>
                <div class="layui-input-inline">
                    <div id="orderSlider" class="orderSlider"></div>
                    <input type="text" class="layui-hide" name="@Model.nameof(m => m.DisplayOrder)" value="@Model.DisplayOrder" />
                </div>
            </div>
            <input type="text" name="@Model.nameof(m => m.Id)" value="@Model.Id" class="layui-hide" />
            <input type="text" name="@Model.nameof(m => m.IsActive)" value="@Model.IsActive" class="layui-hide" />
            <input type="text" name="@Model.nameof(m => m.GroupType)" value="@Model.GroupType" class="layui-hide" />
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-filter="organizeInfoSubmit" lay-submit="">
                        保存提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        //https://stackoverflow.com/questions/39896537/lodash-recursively-find-item-in-array
        function getObject(array, key, value) {
            var o;
            array.some(function iter(a) {
                if (a[key] === value) {
                    o = a;
                    return true;
                }
                return Array.isArray(a.children) && a.children.some(iter);
            });
            return o;
        }
        layui.use(['layer','form', 'element', 'notice', 'iziToast', 'slider', 'tree'], function () {
            var form = layui.form,
                element = layui.element,
                layer = layui.layer,
                slider = layui.slider,
                tree = layui.tree,
                notice = Util.notice !== null && Util.notice() !== null
                       ? Util.notice() : layui.notice,
                iziToast = layui.iziToast;
            var lodash = _;
            var initPageComponents = function () {
                //排序组件
                let $order = $("input[name=@Model.nameof(m => m.DisplayOrder)]");
                slider.render({
                    elem: '#orderSlider'
                    , min: 1
                    , max: 50
                    , input: true //输入框
                    , theme: '#1E9FFF' //主题色
                    , value: $order.val()
                    , change: function (value) {
                        $order.val(value);
                    }
                });
                //机构组织树
                let $treeContainer = $("div.organizetree");
                httpapi.fetchGet('/api/system/getsystemdatadictree?grouptype=1').then(res => {
                    if (!httpapi.checkResponse(res))
                        //输入信息校验错误
                        notice.error(res.message);
                    else {//Success
                        var $parent = $("input[name='ParentId']");
                        tree.render({
                            elem: $treeContainer,
                            id: "organizetree",
                            onlyIconControl: true,
                            data: res.data,
                            click: function (obj) {
                                if (obj.data.id) {
                                    $("#OrganizeName").val(obj.data.title);
                                    $parent.val(obj.data.id);
                                }
                            }
                        });
                        //初始化显示所属机构名
                        if ($parent.val() !== "0") {
                            var oitem = getObject(res.data, 'id', parseInt($parent.val()));
                            if (oitem !== undefined)
                                $("#OrganizeName").val(oitem.title);
                        }
                    }
                }).catch(error => {
                    console.log(error);
                    notice.error("对不起，出现未知错误，请您联系系统管理员！")
                });
                $("#OrganizeName").click(function () {
                    $("div#organizetree").addClass("active");
                });
                $("div#organizetree").mouseleave(function () {
                    $(this).removeClass("active");
                });
            };
            initPageComponents();

             var maxlen = function (value, max) {
                 if (value && typeof value === 'string') {
                    if (value.length > max)
                        return '输入内容长度超过允许值：' + max + ',请精简内容！';
                 }
                 return '';
             };
            form.verify({
                maxlen40: function (value, item) { //value：表单的值、item：表单的DOM对象
                    return maxlen(value, 40);
                }
            });
            //提交保存
            form.on('submit(organizeInfoSubmit)', function (data) {
                var postData = data.field;
                var index = layer.load(2, {time: 10*1000});
                httpapi.fetchPost('/api/system/organizemanage/edit', postData).then(res => {
                    layer.close(index);
                    if (!httpapi.checkResponse(res))
                        //输入信息校验错误
                        notice.error(res.message);
                    else {//Success
                        notice.success(res.message);
                        Util.CloseMainWindow();
                    }
                }).catch(error => notice.error("对不起，出现未知错误，请您联系系统管理员！"));
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
}